import React, {Component,} from 'react';
import {connect} from 'react-redux';
import {screenWidth} from '../utils/StylesUtils';
import * as colors from '../utils/ColorUtils';
import SortItemView from '../ui/view/SortItemView';
import {View, Text, FlatList} from 'react-native';
import * as sortActions from '../actions/sortActions';
import abeStyles from "../utils/StylesUtils";

class TreePage extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.getTreeSort();
    }

    render() {
        const {datas} = this.props;
        return (
            <View style={[abeStyles.matchParent, abeStyles.normalBg]}>
                <View style={[abeStyles.screenW, abeStyles.layoutHLC, abeStyles.gravityCenter, {
                    height: 50,
                    backgroundColor: colors.white
                }]}>
                    <Text style={{fontSize: 15, color: colors.colorTheme}}>体系</Text>
                </View>
                <FlatList
                    data={datas}
                    renderItem={(item, index) => <SortItemView item={item}/>}
                    style={{width: screenWidth,marginTop:1, flex: 1, backgroundColor: colors.colorBg}}
                    keyExtractor={this._extraUniqueKey}
                />
            </View>
        );
    }

    _extraUniqueKey(item, index) {
        return "index" + index + item;
    }
}

const mapState = state => ({
    datas: state.sort.datas
});

const dispatchAction = dispatch => ({
    getTreeSort: () => dispatch(sortActions.getTreeSort())
});

export default connect(mapState, dispatchAction)(TreePage);